<template>
  <div>
    <el-row style="margin-bottom: 10px">
      <el-button type="primary" size="small" @click="showDialog(null)">新增职务</el-button>
      <!--      <el-button plain size="small" :icon="Files" @click="exportData">导出</el-button>-->
      <el-input placeholder="输入名称搜索" clearable size="small" v-model="params.name" @input="currentChange(1)" :prefix-icon="Search" style="width: 160px;margin-left: 10px"/>
    </el-row>

    <!-- 表格列表 -->
    <el-table :data="tableList" size="small" stripe v-loading="loading">
      <el-table-column prop="name" label="职务名称"/>
      <el-table-column prop="remark" label="描述"/>
      <el-table-column prop="creator" label="创建人"/>
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column prop="reviser" label="更新人"/>
      <el-table-column prop="updateTime" label="更新时间"/>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button size="small" text type="primary" @click="showDialog(row)">编辑</el-button>
          <el-button size="small" text type="danger" @click="deleteData(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-block">
      <el-pagination
          v-model:current-page="params.current"
          v-model:page-size="params.size"
          :page-sizes="[10, 20, 30, 40]"
          :small="true"
          :background="false"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :hide-on-single-page="true"
          @size-change="sizeChange"
          @current-change="currentChange"
      />
    </div>

    <!-- 编辑/新增操作 -->
    <el-dialog v-model="dialogShow" :title="formData.id ? '编辑职务' : '新增职务'" width="600px">
      <el-form :model="formData" :rules="rules" size="small" ref="formRef" label-width="100px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name"/>
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input v-model="formData.remark"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="small" @click="dialogShow = false">关闭</el-button>
        <el-button type="primary" :loading="submitLoad" size="small" @click="submitData(formRef)">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {ref, reactive, toRefs, onMounted} from 'vue'
import {Search, Files} from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {getPage, create, edit, removeData} from '/@/api/oa/office/post'

export default {
  name: 'OfficePost',
  setup() {
    const formRef = ref()
    const state = reactive({
      params: {
        current: 1,
        size: 10,
        name: null
      },
      tableList: [],
      total: 0,
      formData: {
        id: null,
        name: null,
        remark: null
      },
      rules: {
        name: {required: true, message: '请填写职务名称', trigger: 'blur'}
      },
      dialogShow: false,
      loading: false,
      submitLoad: false
    })

    const currentChange = (current) => {
      state.params.current = current
      getPostPage()
    }
    const sizeChange = (size) => {
      state.params.size = size
      currentChange(1)
    }
    const getPostPage = async () => {
      state.loading = true
      try {
        const res = await getPage(state.params)
        state.tableList = res.data.records
        state.total = res.data.total
      } catch (e) {
        console.log(e)
      }
      state.loading = false
    }
    const submitData = async (formRef) => {
      state.submitLoad = true
      try {
        if (state.formData.id) {
          await edit(state.formData)
        } else {
          formRef.validate(async (valid) => {
            if (!valid) {
              return false
            }
            await create(state.formData)
          })
        }
        ElMessage.success('保存成功！')
        state.dialogShow = false
        getPostPage()
      } catch (e) {
        console.log(e)
      }
      state.submitLoad = false
    }
    const deleteData = (item) => {
      ElMessageBox.confirm('确定删除 ' + item.name + ' ？', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        buttonSize: 'small',
        type: 'warning'
      }).then(async () => {
        try {
          await removeData(item)
          ElMessage.success('删除成功！')
          await getPostPage()
        } catch (e) {
          console.log(e)
        }
      }).catch(() => {
      })
    }
    const showDialog = (item) => {
      if (item) {
        state.formData = Object.assign({}, item)
      } else {
        state.formData = {
          id: null,
          name: null,
          description: null
        }
      }
      state.dialogShow = true
    }
    const exportData = () => {
      // TODO 导出数据
    }

    onMounted(() => {
      getPostPage()
    })

    return {
      ...toRefs(state),
      Files,
      Search,
      formRef,
      sizeChange,
      currentChange,
      getPostPage,
      submitData,
      deleteData,
      showDialog,
      exportData
    }
  }
}

</script>
<style lang="scss" scoped>
.page-container {
  padding: 1px;
}
</style>
